<template>
  <a-row class="login_box" v-title data-title="ESG-登录">
    <a-col :span="12" class="left_row">
      <div class="logon_from">
        <div class="login_header">
          <img src="@/assets/img/dc3.png" alt="" />
          <h2>ESG-企业版</h2>
        </div>
        <a-form-model id="components-form-demo-normal-login" :model="model" ref="form" class="login-form"
          @keyup.enter.native="handleSubmit" :rules="validatorRules">
          <a-form-model-item required prop="username">
            <a-input v-model="model.username" size="large" placeholder="请输入帐户名">
              <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
            </a-input>
          </a-form-model-item>
          <a-form-model-item required prop="password">
            <a-input v-model="model.password" size="large" type="password" autocomplete="false" placeholder="请输入密码">
              <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
            </a-input>
          </a-form-model-item>
          <a-row :gutter="0">
            <a-col :span="16">
              <a-form-model-item required prop="inputCode">
                <a-input v-model="model.inputCode" size="large" type="text" placeholder="请输入验证码">
                  <a-icon slot="prefix" type="smile" :style="{ color: 'rgba(0,0,0,.25)' }" />
                </a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8" style="text-align: right">
              <img v-if="requestCodeSuccess" style="margin-top: 2px" :src="randCodeImage"
                @click="handleChangeCheckCode" />
              <img v-else style="margin-top: 2px" src="@/assets/img/Login/checkcode.png" @click="handleChangeCheckCode" />
            </a-col>
          </a-row>

          <a-form-model-item>
            <a-checkbox @change="handleRememberMeChange" default-checked>自动登录</a-checkbox>
            <a class="login-form-forgot" href=""> 忘记密码 </a>
            <!-- <div @click="handleChangeCheckCode">刷新验证码</div> -->
            <a-button type="primary" @click.stop.prevent="handleSubmit" class="login-form-button">
              登录
            </a-button>
            或
            <a @click="() => { $router.push('/register') }"> 注册! </a>
          </a-form-model-item>
        </a-form-model>
      </div>
    </a-col>
    <a-col :span="12" class="right_row">
      <div class="text">
        <h3>全链条企业碳管理平台，大数据鉴证零碳未来</h3>
        <div class="other_text">
          <!-- <p>开启您的试用之旅，您将获得：</p> -->
          <ul>
            <li>
              <i class="iconfont icon-duihao3"></i>
              覆盖碳核算、报告、核查、资产管理与交易到零碳战略规划的全链条碳管理平台
            </li>
            <li>
              <i class="iconfont icon-duihao3"></i>GHG，ISO 和国家碳核算标准全覆盖，内嵌海量排放因子数据库
            </li>
            <li>
              <i class="iconfont icon-duihao3"></i>支持基于设施、基于凭证等多源数据采集模式
            </li>
            <li>
              <i class="iconfont icon-duihao3"></i>灵活的组织架构配置与核算任务规划构建敏捷的碳管理业务模式
            </li>
            <li>
              <i class="iconfont icon-duihao3"></i>先进的专利技术支撑数据中台，提供安全、可信的碳核算与披露技术后端
            </li>
            <li>
              <i class="iconfont icon-duihao3"></i>灵活的部署方式，满足各类企业高效碳管理业务需求
            </li>
            <li>
              <i class="iconfont icon-duihao3"></i>业内专家在线技术支持，提供从基础知识,政策与合规,软件与数据技术的全流程贴心服务
            </li>
            <li>
              <i class="iconfont icon-duihao3"></i>基础碳核算永久免费，高级功能致力于为客户零碳转型提供切实的经济和社会效益
            </li>
          </ul>
        </div>
        <div class="btn">免费使用</div>
        <img src="@/assets/img/Login/cn-login-promo-free-trial-v2.png" alt="" />
      </div>
      <div class="img_box"></div>
    </a-col>
    <login-select-tenant ref="loginSelect" @success="loginSelectOk"></login-select-tenant>
  </a-row>
</template>

<script>
import { getAction } from "@/api/manage";
import { timeFix } from "@/utils/util";
import LoginSelectTenant from "./LoginSelectTenant";

import Vue from "vue";
import { mapActions } from "vuex";
export default {
  name: "Login",
  data() {
    return {
      requestCodeSuccess: false,
      randCodeImage: "",
      currdatetime: "",
      rememberMe: false,
      model: {
        username: "",
        password: "",
        inputCode: "",
      },

      validatorRules: {
        username: [{ required: true, message: "请输入用户名!" }],
        password: [
          {
            required: true,
            message: "请输入密码!",
            validator: "click",
          },
        ],
        inputCode: [
          {
            required: true,
            message: "请输入验证码!",
          },
        ],
      },
    };
  },
  components: {
    LoginSelectTenant,
  },
  mounted() { },
  created() {
    this.handleChangeCheckCode();
  },
  methods: {
    ...mapActions(["Login"]),
    // 登录事件
    handleSubmit(e) {
      this.handleLogin();
    },
    handleRememberMeChange(e) {
      this.rememberMe = e.target.checked;
    },
    handleLogin(rememberMe) {
      this.validateFields(["username", "password", "inputCode"], (err) => {
        if (!err) {
          let loginParams = {
            username: this.model.username,
            password: this.model.password,
            captcha: this.model.inputCode,
            checkKey: this.currdatetime,
            remember_me: rememberMe,
          };
          //   console.log("登录参数", loginParams);
          this.Login(loginParams)
            .then((loginResult) => {
              this.$refs.loginSelect.show(loginResult.result);
              //   console.log("success", loginResult.result);
            })
            .catch((err) => {
              if (err && err.code === 412) {
                //   登录页面，当输入验证码错误时，验证码图片要刷新一下，而不是保持旧的验证码图片不变
                this.handleChangeCheckCode();
                //   console.log("fail", err);
              }
              this.requestFailed(err);
            });
        }
      });
    },
    // 登录失败
    requestFailed(err) {
      let description =
        ((err.response || {}).data || {}).message ||
        err.message ||
        "请求出现错误，请稍后再试";
      //   console.log(this.$notification);

      this.$notification["error"]({
        message: "登录失败",
        description: description,
        duration: 4,
      });
    },
    // 刷新验证码
    handleChangeCheckCode() {
      this.currdatetime = new Date().getTime();
      this.model.inputCode = "";
      getAction(`/sys/randomImage/${this.currdatetime}`)
        .then((res) => {
          if (res.success) {
            this.randCodeImage = res.result;
            this.requestCodeSuccess = true;
          } else {
            this.$message.error(res.message);
            this.requestCodeSuccess = false;
          }
        })
        .catch(() => {
          this.requestCodeSuccess = false;
        });
    },
    loginSelectOk() {
      this.loginSuccess();
    },
    //登录成功
    loginSuccess() {
      // 如果没有部门的话 直接登录成功
      this.$router.push({ path: "/" }).catch(() => {
        //   console.log("登录跳转首页出错,这个错误从哪里来的");
      });
      this.$notification.success({
        message: "欢迎",
        description: `${timeFix()}，欢迎回来`,
      });
    },
    /**
     * 验证字段
     * @param arr
     * @param callback
     */
    validateFields(arr, callback) {
      let promiseArray = [];
      for (let item of arr) {
        let p = new Promise((resolve, reject) => {
          this.$refs["form"].validateField(item, (err) => {
            if (!err) {
              resolve();
            } else {
              reject(err);
            }
          });
        });
        promiseArray.push(p);
      }
      Promise.all(promiseArray)
        .then(() => {
          callback();
        })
        .catch((err) => {
          callback(err);
        });
    },
  },
};
</script>

<style lang="scss" >
#components-form-demo-normal-login .login-form {
  max-width: 300px;
}

#components-form-demo-normal-login .login-form-forgot {
  float: right;
}

#components-form-demo-normal-login .login-form-button {
  height: 38px !important;
  font-size: 16px !important;
  width: 100%;
  background: #0176d3 !important;
  color: #fff !important;
  box-shadow: 2px 2px 8px #ccc;
}

.login_box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
  width: 100%;

  .ant-form-explain {
    text-align: left !important;
    width: 100%;
    height: 100%;
  }

  .left_row {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: #f4f6f9;

    .logon_from {
      width: 100%;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .login_header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;

        img {
          width: 60px;
          height: 60px;
        }

        h2 {
          font-weight: 600;
          font-size: 32px;
          padding-top: 6px;
          margin-left: 10px;
        }
      }

      .login-form {
        width: 420px;

        background: #fff;
        padding: 60px 30px;
        border-radius: 5px;
        box-shadow: 2px 2px 7px rgb(212, 212, 212);
        border: 1px solid #f1f0f0;
      }
    }
  }

  .right_row {
    height: 100vh;
    background: url("@/assets/img/Login/php-login-free-trial-bg.jpg") no-repeat;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    .text {
      text-align: left;
      padding: 20px 60px 0;
      width: 100%;

      .other_text {
        p {
          font-size: 14px;
        }

        ul {
          li {
            font-size: 14px;
            line-height: 1.42857143;
            color: #032d60;
            margin-bottom: 4px;

            i {
              color: #2d8b0d;
              margin-right: 10px;
            }
          }
        }
      }

      .btn {
        margin: 10px 0;
        background: #0b5cab;
        color: #fff;
        border-radius: 5px;
        padding: 4px 10px;
        width: fit-content;
        cursor: pointer;
      }

      h3 {
        color: #032d60;
        font-weight: 600 !important;
        font-size: 20px !important;
        line-height: 30px !important;
        margin-bottom: 10px;
      }

      img {
        width: 90%;
      }
    }

    .img_box {
      width: 90%;
    }
  }
}
</style>